<div class="tlp-form-element">
    <label class="tlp-label" for="area">Area</label>
    <select class="tlp-select" id="area" name="area">
        <option value=""></option>
        <option value="area-51">Area 51</option>
        <option value="area-52">Area 52</option>
        <option value="area-53a">Area 53a</option>
        <option value="area-58">Area 58</option>
    </select>
</div>

<div class="tlp-form-element">
    <label class="tlp-label" for="area-adjusted">Area adjusted</label>
    <select class="tlp-select tlp-select-adjusted" id="area-adjusted" name="area">
        <option value=""></option>
        <option value="area-51">Area 51</option>
        <option value="area-52">Area 52</option>
        <option value="area-53a">Area 53a</option>
        <option value="area-58">Area 58</option>
    </select>
</div>

<div class="tlp-form-element">
    <label class="tlp-label" for="area-help">Area help</label>
    <select class="tlp-select" id="area-help" name="area">
        <option value=""></option>
        <option value="area-51">Area 51</option>
        <option value="area-52">Area 52</option>
        <option value="area-53a">Area 53a</option>
        <option value="area-58">Area 58</option>
    </select>
    <p class="tlp-text-info"><i class="fa fa-life-saver"></i> Hey bro', I'm a help text. I'm here to help you.</p>
</div>

<div class="tlp-form-element">
    <label class="tlp-label" for="area-mandatory">Area mandatory <i class="fa fa-asterisk"></i></label>
    <select class="tlp-select" id="area-mandatory" name="area">
        <option value="" selected disabled>Choose your area</option>
        <option value="area-51">Area 51</option>
        <option value="area-52">Area 52</option>
        <option value="area-53a">Area 53a</option>
        <option value="area-58">Area 58</option>
    </select>
</div>

<div class="tlp-form-element tlp-form-element-disabled">
    <label class="tlp-label" for="area-disabled">Area disabled</label>
    <select class="tlp-select" id="area-disabled" name="area" disabled>
        <option value="area-51">Area 51</option>
        <option value="area-52">Area 52</option>
        <option value="area-53a">Area 53a</option>
        <option value="area-58">Area 58</option>
    </select>
</div>

<div class="tlp-form-element tlp-form-element-error">
    <label class="tlp-label" for="area-error">Area error</label>
    <select class="tlp-select" id="area-error" name="area">
        <option value="area-51">Area 51</option>
        <option value="area-52">Area 52</option>
        <option value="area-53a">Area 53a</option>
        <option value="area-58">Area 58</option>
    </select>
    <p class="tlp-text-danger">Oops, it seems you missed something <i class="fa fa-frown-o"></i></p>
</div>

<div class="tlp-form-element">
    <label class="tlp-label" for="area-small">Area small</label>
    <select class="tlp-select tlp-select-small" id="area-small" name="area">
        <option value="area-51">Area 51</option>
        <option value="area-52">Area 52</option>
        <option value="area-53a">Area 53a</option>
        <option value="area-58">Area 58</option>
    </select>
</div>

<div class="tlp-form-element">
    <label class="tlp-label" for="area-large">Area large</label>
    <select class="tlp-select tlp-select-large" id="area-large" name="area">
        <option value="area-51">Area 51</option>
        <option value="area-52">Area 52</option>
        <option value="area-53a">Area 53a</option>
        <option value="area-58">Area 58</option>
    </select>
</div>
